<template>
  <div>
      <div class="login_box">
          <h2 style="color: #666">登录账号</h2>
          <p style="color: #666">虾米 — 严选商城欢迎您</p>
          <div class="login_input">
              <input type="text" v-model="mobile" placeholder="手机号码" class="login_input_inp">
              <div class="login_input_icon"></div>
          </div>
          <div class="login_input">
              <input type="password" v-model="password" placeholder="密码" class="login_input_inp">
              <div class="login_input_icon"></div>
          </div>
          <div class="login_btn" @click="login">登 录</div>
          <p class="login_reset">忘记密码</p>
          <p class="login_enroll" @click="goEnroll">还没有注册？ 立即注册</p>
      </div>
  </div>
</template>

<script>
import PATH from '../../router/constant'
export default {
    data() {
        return {
            mobile: '',
            password: '',
        }
    },
    methods: {
        goEnroll() {
            this.$router.push(PATH.ENROLL)
        },
        login() {
            this.$API.getToken({
                params: {
                    mobile: this.mobile,
                    pwd: this.password
                }
            }).then(res=> {
                console.log(res)
                localStorage.setItem('token', res.data.data.token)
                if(localStorage.token) {
                    window.history.back()
                }else {
                    return
                }
            })
        }
    }
}
</script>

<style scoped>
.login_box {
    width: 70%;
    margin: 15%;
}
.login_input {
    width: 100%;
    height: 1rem;
    margin: 0.2rem 0;
    border-radius: 0.1rem;
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
}
.login_input_inp {
    width: 45%;
    height: 100%;
    border: none;
    outline: none;
    color: #666;
    background-color: #F5F5F5;
}
.login_input_icon {
    width: 45%;
    height: 100%;
    background-color: #F5F5F5;
}
.login_btn {
    width: 80%;
    height: 1rem;
    font-size: 0.25rem;
    margin: 10%;
    color: #fff;
    text-align: center;
    line-height: 1rem;
    background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
    box-shadow: 0 5px 3px rgba(0,0,0,0.3);
    -webkit-tap-highlight-color: transparent;
    border-radius: 0.1rem;
}
.login_reset {
    font-size: 0.2rem;
    color: #666;
    text-align: center;
}
.login_enroll {
    font-size: 0.2rem;
    color:skyblue;
    text-align: center;
    font-weight: bold;
}
</style>